<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <title>Flexbox: Task 1</title>
    <style>
        ul {
            border: 2px solid black;
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

        li {
            flex: 1;
            color: white;
            list-style: none;
            padding: 10px;
            border-radius: 10px;
            border: 2px solid white;
            background-color: #4d7298;
        }
    </style>
</head>

<body>
<ul>
    <li>I am small</li>
    <li>I have more content than the very small item.</li>
    <li>I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is
        pretty good at dealing with situations where we end up with more words than expected!
    </li>
</ul>
</body>
</html>